<template>
    <div class="box">
        <header class="headers">
          <mt-header title="long long long long title">
            <router-link to="/life" slot="left">
              <mt-button icon="back">back</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
          </mt-header>
        </header>
         <mt-swipe :auto="4000">
          <mt-swipe-item><img src="./../../assets/bb2.jpg" alt=""></mt-swipe-item>
          <mt-swipe-item><img src="./../../assets/bb5.jpg" alt=""></mt-swipe-item>
          <mt-swipe-item><img src="./../../assets/bb6.jpg" alt=""></mt-swipe-item>
          </mt-swipe>
           <div class="youhuijuan">
             <img src="./../../assets/yhj.jpg" alt="">
          </div>
           <div class="Menu">
          <router-link tag="p" to="qingjie"><b><span><img src="./../../assets/xiao0.jpg" alt=""></span><p>清洁</p></b></router-link>
          <router-link tag="p" to="weiyang"><b><span><img src="./../../assets/xiao1.jpg" alt=""></span><p>喂养</p></b></router-link>
          <router-link tag="p" to="tongzhuang"><b><span><img src="./../../assets/xiao2.jpg" alt=""></span><p>童装</p></b></router-link>
          <router-link tag="p" to="more"><b><span><img src="./../../assets/xiao2.jpg" alt=""></span><p>更多</p></b></router-link>
        </div>
        <div class="content">
          <div>
        <div class="bb_bibei">
          <router-link tag="p" to="babbybb">宝宝必备</router-link>
          <span>更多</span>
        </div>
        </div>
          <!-- <Shipulist :shipulist = 'shipulist'></Shipulist> -->
          <!-- <Uplist :uplist = 'uplist'></Uplist> -->
        </div>
    </div>
</template>
<script>
// import Uplist from '@/components/KIT/Uplist'
import axios from 'axios';
import Vue from 'vue';
import { Header } from 'mint-ui';

Vue.component(Header.name, Header);

export default {
  data () {
    return {
      uplist: []
    }
  },
  components: {
    
  },
  created () {
    // axios.get('http://jx.xuzhixiang.top/ap/api/productlist.php')
    //   .then(data => {
    //     console.log(data)
    //     this.uplist = data.data.data
    //   })
      // axios.get('/sgj/douban')
      // .then(data => {
      //   console.log(data)
      //   this.uplist = data.data
      // })
    // axios.get('/sgj/hometow/')
    // .then(data => {
    //   console.log('10',data)
    //   console.log(data.data)
    //   // console.log(data.data.returnvalue[0])
    //   this.shipulist = data.data.data
    // })
  }
}
</script>

<style lang="scss" scoped>
   @import '@/lib/reset.scss';
  .header {
    @include background-color(#f9f9f9);
    @include flexbox();
    @include align-items();
    span {
      float: left
    };
    p {
      float:left;
      margin-left: 150px;
    }
  }
  .mint-swipe {
      width: 90%;
      height: 150px;
      display: block;
      margin-left: 5%;
      border: 1px solid #aaa;
      border-radius: 20px;
      img {
        @include rect(100%, 100%)
      }
    }
    .youhuijuan {
      @include rect(90%, 50px);
      @include border(1px, #ccc, solid, 10px);
      @include margin(5% 0 0 5% );
      img {
        @include rect(100%, 100%);
      }
    }
    .Menu {
  margin-top: 20px;
  height: 120px;
  width: 100%;
  // border: 1px solid #aaa;
  display: flex;
  justify-content:center;
  padding-left:center;
  align-items: flex-start;
  b {
    @include rect(80px, 100px);
    // @include border(1px, #ccc, solid);
    display: block;
    @include flexbox();
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items();
    span {
      @include rect(40px, 40px);
      @include border(1px, #ccc, solid, 30%);
      img {
        @include rect(100%, 100%)
      }
      }
    p {
      @include margin(10px 0 0 0)
    }
  }
}
.bb_bibei {
  @include rect(100%, 30px);
  // @include border(1px, #ccc, solid);
  @include flexbox();
  @include justify-content(space-between);
  p {
    margin-left: 5%;
  }
  span {
    margin-right: 5%;
  }
}
</style>
